<!--konva 使用-->
<template>
    <div class="content">
        <div class="content-title">
            <h1>konva 使用</h1>
        </div>
        <div class="content-konva" ref="contentRef">
            <div class="canvas-content" id="canvas-konva"></div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted } from "vue";
    import Konva from 'konva';

    const contentRef = ref();
    const stage = ref();
    const layer = ref();
    const rect = ref();

    const circle = ref();

    // 初始化konva
    const initKonva = ()=>{
        const konvaWidth = contentRef.value.offsetWidth;
        const konvaHeight = contentRef.value.offsetHeight;

        stage.value = new Konva.Stage({
            container:'canvas-konva',
            width:konvaWidth,
            height:konvaHeight,
        });
        layer.value = new Konva.Layer();
        rect.value = new Konva.Rect({
            width:50,
            height:50,
            x:10,
            y:50,
            fill:'red',
            strokeWidth:2,
            draggable: true // 拖拽
        });

        circle.value = new Konva.Circle({
            radius: 40,
            fill: 'red',
            stroke: 'black',
            strokeWidth: 4,
            x:200,
            y:50,
            draggable: true // 拖拽
        })

        layer.value.add(rect.value);
        layer.value.add(circle.value);
        stage.value.add(layer.value);
        layer.value.draw();
    };


    onMounted(() => {
        initKonva()
    })


</script>

<style scoped>
    .content{
        width: 100%;
        height: 97%;
    }
    .content-title{
        width: 100%;
        height: 10%;
    }
    .content-konva{
        width: 100%;
        height: 88%;
    }
    .canvas-content{
        width: 99%;
        height: 99%;
    }
</style>